<template>
	<scroll-view scroll-y class="bgf5 recharge c33" :style="{height: 'calc(100vh - 156rpx - ' + statusBar + 'px)'}">
		<view class="bg6c mt11 mx15">
			<image class="bgImg r6" src="/static/img/bg/card_bg2.png" mode="aspectFill"></image>
			<view class="box pt14 px9 boxS">
				<view class="flex flexC fs13">
					<view class="flex1">账户余额（元）</view>
					<view class="flex flexC" @click="chargeDetail">
						<text class="mr4">消费明细</text>
						<uni-icons type="right" size="14" color="#6F3D00"></uni-icons>
					</view>
				</view>
				<view class="mt10 flex flexC">
					<text class="fs21 bold6" @click="showBalance">{{balance}}</text>
					<!-- <view class="flex flexC pt5">
						<text class="fs10 mx4">可用门店</text>
						<uni-icons type="help-filled" size="16" color="#6F3D00"></uni-icons>
					</view> -->
				</view>
			</view>
		</view>
		<view class="bold6 fs15 mx15 mt15 mb8">
			<text class="fs14 cfad">▎</text>
			<text>充值金额</text>
		</view>
		<view class="bgff r8 mx15">
			<view class="flex flexC aliC fs14 tabs">
				<view v-if="selectShop.is_join_balance == 1" @click="clickAll" class="flex1 py10" :class="selectIndex == 0 ? 'active' : ''">全国通用充值</view>
				<view v-if="selectShop.is_join_balance == 1" @click="clickShop" class="flex1" :class="selectIndex == 1 ? 'active' : ''">单门店充值</view>
			</view>
			<view class="flex flexC flexW list px2 mt16">
				<view v-for="(item, index) in chargeList" :key="index"
					class="aliC r5 w33 py14 boxS mx3 mb12 flex flexCol flexC"
					:class="index == selectChargeIndex ? 'bgf6c' : ''" @click="selectCharge(item,index)">
					<view class="fs11">￥<text class="fs20 bold6">{{item.amount}}</text></view>
					<view class="fs12">到账{{item.get_amount}}</view>
				</view>
			</view>
		</view>
		<view class="bgf5 px15  fs12 c85">
			<view class="fs16 bold6 py12 c00">充值说明:</view>
			<view class="mb12">1、充值余额永久有效、不支持退款</view>
			<view class="mb12">2、充值余额可用于门店预约、订单续单</view>
			<view class="mb12">
				<text>3、全国通用适用开通全国充值的门店，单门店仅限充值门店使用</text>
				
<!-- 				<text>3、充值余额仅限指定门店使用</text>
				<text class="cf6c mx6">查看使用门店</text>
				<image class="w4" src="/static/img/icon/right_sel.png" mode="widthFix"></image> -->
			</view>
			<view class="mb12">4、首次充值后可解锁会员价（根据不同门店情况定）</view>
			
		</view>
		<view class="fixed px15 pb20 pt10 boxS">
			<!-- <view class="flex flexC flexJC fs14 pb15">
				<view class="flex flexC">
					<uni-icons v-if="true" type="circle" color="#F9D919" size="22"></uni-icons>
					<uni-icons v-else type="checkbox-filled" color="#F9D919" size="22"></uni-icons>
					<text class="ml3 c66">我已阅读并同意</text>
				</view>
				<navigator class="cf6c" url="/pages/apply/agreement">《小程序账户充值管理章程》</navigator>
			</view> -->
			<view class="flex flexC">
				<view class="flex1 bg00 fs12 cff pl20 pr10 py2">
					<view class="">
						<text>总计：</text>
						<text class="cfad fs11">￥</text>
						<text class="cfad fs15 bold6" v-if="selectItem != null">{{selectItem.amount}}</text>
						<text class="cfad fs15 bold6" v-else></text>
					
					</view>
					<view class="">
						<text>赠送：</text>
						<text class="ccda fs11">￥</text>
						<text class="ccda fs15 bold6" v-if="selectItem != null">{{selectItem.get_amount-selectItem.amount}}</text>
						<text class="ccda fs15 bold6" v-else>0</text>
					
					</view>
				</view>
				<view class="btn px16 py2 fs16 c00 bold6" @click="confirmCharge">立即充值</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		name: "account-recharge",
		props: {
			statusBar: {
				type: Number,
				default: 20
			}
		},

		data() {
			return {
				chargeList: [],
				balance: 0,
				selectChargeIndex: 0,
				isAgreenContact: false,
				selectShop: null,
				selectIndex: 0,
				selectItem:null,
				shopBalance:0,
				allBalance:0
			};
		},
		methods: {
			
			showBalance(){
				uni.showModal({
					title:"余额提示",
					content:"平台通用余额："+this.allBalance+" ，店铺专属余额："+this.shopBalance,
					showCancel:false,
					confirmText:"确定",
					complete() {
						
					}
					
						
				})
			},
			
			clickAll(){
				this.selectChargeIndex = 0;
				this.selectIndex = 0;
				this.getCharge(null);
			},
			clickShop(){
				this.selectChargeIndex = 0;
				this.selectIndex = 1;
				this.getCharge(null);
				
			},
			
			
			confirmCharge(){
				
				let that = this;
				
				if(this.selectShop.is_join_balance == 1 && this.selectIndex == 0){
					
					that.doCharge();
				}else{
					uni.showModal({
						title:"充值提醒",
						content:"您是否充值到"+this.selectShop.name,
						showCancel:true,
						confirmText:"确定",
						complete(res) {
							if(res.confirm){
								that.doCharge();
							}
						}
							
					})
				}
				

			},

			chargeShopList() {
				
				
				uni.navigateTo({
					url:'/pages/discount/chargeCode'
				})
			},

			chargeDetail() {
				uni.navigateTo({
					url: "/pages/discount/chargeDetail"
				})
			},

			doCharge() {
				
				if(this.selectShop.is_join_balance == 1 && this.selectIndex == 0){
					
					let param = {
						id: this.chargeList[this.selectChargeIndex].id,
						shop_id:this.selectShop.id
					};
					let that = this;
					this.$api.allCharge(param).then(res => {
						console.info(JSON.stringify(res));
						if (res.code == 1) {
					
							that.wechatPay(res.data.payInfo)
					
						} else {
					
						}
					})
				}else{
					if (this.chargeList.length == 0) return;
					let param = {
						charge_id: this.chargeList[this.selectChargeIndex].id,
						orgId: uni.getStorageSync("orgId")
					};
					let that = this;
					this.$api.charge(param).then(res => {
						console.info(JSON.stringify(res));
						if (res.code == 1) {
					
							that.wechatPay(res.data.payInfo)
					
						} else {
					
						}
					})
				}
				
			
			},

			wechatPay(payConfig) {
				let that = this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payConfig.payTimeStamp,
					nonceStr: payConfig.paynonceStr,
					package: payConfig.payPackage,
					signType: payConfig.paySignType,
					paySign: payConfig.paySign,
					success: function(res) {

						that.getCharge();
					},
					fail: function(err) {
						uni.showToast({
							title: "取消充值",
							icon: 'none'
						});
					}
				});
			},
			selectCharge(item, index) {
				this.selectChargeIndex = index;
				this.selectItem = item;
				console.info("===selectChargeIndex====" + index);
			},
			getCharge(selectShop) {

				if (selectShop != null) {
					this.selectShop = selectShop;
				}
				console.info(JSON.stringify(this.selectShop));
				this.$forceUpdate();
				
				if(this.selectShop.is_join_balance == 1 && this.selectIndex == 0){
					
					let param = {
						shop_id: this.selectShop.id
					};
					let that = this;
					this.$api.shopAllChargeList(param).then(res => {
						console.info(JSON.stringify(res));
						if (res.code == 1) {
							that.balance = res.data.balance;
							that.shopBalance = res.data.shopBalance;
							that.allBalance = res.data.allBalance;
							that.chargeList = res.data.list;
							if(that.chargeList.length >0){
								that.selectItem = that.chargeList[0];
							}
						} else {
					
						}
					})
				}else{
					let param = {
						shop_id: this.selectShop.id
					};
					let that = this;
					this.$api.getChargeInfo(param).then(res => {
						console.info(JSON.stringify(res));
						if (res.code == 1) {
							that.balance = res.data.balance;
							that.chargeList = res.data.chargeList;
							that.shopBalance = res.data.shopBalance;
							that.allBalance = res.data.allBalance;
							if(that.chargeList.length >0){
								that.selectItem = that.chargeList[0];
							}
						} else {
					
						}
					})
				}
			
			},
			onChangeAgreen(ev) {
				this.isAgreenContact = ev.detail.value;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.recharge {
		.fixed {
			// position: fixed;
			// bottom: 0;
			// left: 0;
			width: 100vw;
			box-sizing: border-box;
			overflow: hidden;
			// box-shadow: 0 0 10rpx 4rpx rgba(0, 0, 0, .1);
			.bg00 {
				height: 90rpx;
				border-radius: 80rpx 0 0 80rpx;
			}
			.ccda {color: #CDAA08;}
			.btn {
				height: 90rpx;
				border-radius: 0 80rpx 80rpx 0;
				line-height: 90rpx;
				background-color: #FAD00D;
			}
		}
		.cfad {color: #FAD00D;}
		.tabs {
			> .flex1 {
				position: relative;
			}
			.active {
				font-weight: 600;
				&::after {
					content: '';
					width: 46rpx;
					height: 6rpx;
					background-color: #FAD00D;
					position: absolute;
					bottom: -8rpx;
					border-radius: 4rpx;
					right: calc(50% - 23rpx);
				}
			}
			
		}
		.list {
			.bgf6c {color: #fff;}
		}
		.w12 {
			width: 14rpx;
			height: 14rpx;
		}

		.w4 {
			width: 10rpx;
			height: 10rpx;
		}

		.tip {
			width: 20rpx;
			height: 20rpx;
		}

		.bg6c {
			color: #6F3D00;
			position: relative;
			.bgImg {
				width: 100%;
				height: 160rpx;
				position: relative;
				z-index: 1;
			}
			.box {
				width: 100%;
				position: absolute;
				top: 0;
				height: 160rpx;
				z-index: 9;
			}
		}

		.w33 {
			width: calc(33.33% - 12rpx);
			color: #333;
			border: 2rpx solid #e5e5e5;
			&.bgf6c {
				color: #6F3D00;
				background-color: #FEE23A;
				border: 2rpx solid #FEE23A;
			}
		}
	}
</style>